import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./GroupList.module.less";
import Breadcrumb from "@/components/public/Breadcrumb/Breadcrumb";
import { useRouter } from "vue-router";
import { CheckSquareFilled } from "@ant-design/icons-vue";
import { imgPath } from "@/common/utils";
import { $getProductList } from "@/api/product/product";
export default defineComponent({
  name:'GroupList',
  setup() {
    
    const router = useRouter();
    const breadcrumbState = ref([
      () => <span class={styles['Breadcrumb-Home']} onClick={() => { router.push('/home') }}>首页</span>,
      () => <span class={styles['Breadcrumb-GroupList']}>旅游意外险</span>,
    ])

    const navs_state = reactive({
      list: [
        {
          label: '境内旅游（不含港澳台）',
          value: '境内旅游（不含港澳台）',
        },
      ],
      checked: "境内旅游（不含港澳台）"
    })

    const companyState = reactive({
      list: [
        {
          img: imgPath('/GroupList/companyStateImg.png'),
          code: '0001300049.00053',
        },
      ],
      checked: '',
    })

    const productListState = reactive({
      total: 0,
      page: 1,
      pageSize: 10,
      list: [],
    })

    const Filter = () => (
      <div class={styles.filter}>
        <div class={styles['filter-title']}>产品分类</div>
        <div class={styles['filter-navs']}>
          {
            navs_state.list.map((item: any) => (
              <div class={[styles['filter-nav'], item.value === navs_state.checked && styles.checked]} onClick={() => { navs_state.checked = item.value }}>
                {item.label}
              </div>
            ))
          }
        </div>
        <div class={styles['product_detail']}>
          <div class={styles['detail-row']}>
            <div class={styles['row-label']}>产品筛选</div>
            <div class={styles['row-text']}>共<span>{productListState.total}</span>款产品</div>
          </div>
          <div class={styles['detail-row']}>
            <div class={styles['row-label']}>承保公司</div>
            <div class={styles['row-companys']}>
              {
                companyState.list.map((item: any) => (
                  <div class={[styles['row-company'], companyState.checked === item.code && styles.checked]} onClick={() => { companyState.checked = item.code }}>
                    <img src={item.img} />
                  </div>
                ))
              }
            </div>
          </div>
        </div>
      </div>
    )
    const itemDetail = (item: any) => {
      router.push(`/GroupDetail?id=${item.id}`);
      const dom: any = document.getElementById("app");
      dom.scrollTop = 0;
    }
    const ProductList = () => (
      <div class={styles['product-list']}>
        {
          productListState.list.map((item: any) => (
            <div class={styles['product-item']}>
              <div class={styles['item-name']}>{item.name}</div>
              <div class={styles['product-insured']}>
                <div class={styles['product-ul']}>
                  {
                    item.liability_tag?.map((itemL: any) => (
                      <div class={styles['product-li']}>
                        <CheckSquareFilled class={styles.icon} />
                        <span>{itemL}</span>
                      </div>
                    ))
                  }
                </div>
                <div class={styles['detail-btn']} onClick={() => { itemDetail(item) }}>查看详情</div>
              </div>
            </div>
          ))
        }
      </div>
    )

    const Help = () => (
      <div class={styles.help}>
        <div class={styles['help-card']}>
          <div class={styles['help-card-header']}>如何选购旅游保险？</div>
          <div class={styles['help-card-content']}>
            一般的境内旅游观光,仅购买普通境内旅游保险产品即可,如出行较远且有老人或小孩子的则需要补充急性病、紧急救援和医疗送返保障的产品、当然境内旅游保险保额的高低也是一个重要的参考条件,短期国内旅游保险都比较便宜保额可以选择高一些。购买国内旅游保险，带着保障去旅游!
          </div>
        </div>
      </div>
    )
    //跳页
    const getProductList = () => {
      $getProductList({
        page: productListState.page,
        pSize: productListState.pageSize,
      }).then((res: any) => {
        productListState.list = res?.data?.data || [];
        productListState.total = res?.data?.total;
        productListState.page = res?.data?.current_page;
        productListState.pageSize = res?.data?.per_page;
      })
    }
    //跳页
    const onChange = (page: number, pageSize: number) => {
      productListState.page = page;
      productListState.pageSize = pageSize;
      getProductList();
    }
    const Main = () => (
      <div class={styles.main}>
        <ProductList />
        <Help />
        <div class={styles['pagination']}>
          <a-pagination total={productListState.total} v-model:current={productListState.page} pageSize={productListState.pageSize} onChange={(page: number, pageSize: number) => { onChange(page, pageSize) }} />
        </div>
      </div>
    )
    onMounted(() => {
      getProductList()
    })
    return () => (
      <div class={styles.groupList}>
        <div class={styles['groupList-container']}>
          <Breadcrumb list={breadcrumbState.value} />
          <img src={imgPath("/GroupList/banner.png")} class={styles.banner} />
          <Filter />
          <Main />
        </div>
      </div>
    )
  }
})